﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<base href="<%=basePath%>">
<title>设备首页</title>
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">  
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/d_common.css">
<link rel="stylesheet" href="js/layer/skin/default/layer.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/layer/layer.js"></script>
<style type="text/css">
	.mengban{
		position:fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		background: #000;
	    -webkit-opacity: 0.5;  
	    -moz-opacity: 0.5;  
	    -ms-opacity: 0.5; 
	    -khtml-opacity: 0.5;  
	    opacity: 0.5;  
	    filter:alpha(opacity=50);  
	    display: none;   
	}
	#ruleTip ,#regBoard,#loginBoard{
		position: fixed;
		width: 650px;
		height: 500px;
		top: 50%;
		left: 50%;
		margin: -250px 0 0 -300px;
		background: #fff;
		display: none;
		
	}/*#loginBoard{
		height: 200px;
		margin: -100px 0 0 -150px;
	}*/
	#regBoard #namePwd,#login-namePwd{
		margin: 30px 0 0 0;
		text-align: center;
	}#regBoard #namePwd li,#login-namePwd li{
		margin: 5px 0;
	}#regBoard #namePwd li input ,#login-namePwd li input{
		width: 180px;
		padding: 0 3px;
		height: 25px;
		line-height: 25px;
		font-size: 18px;
		border: 1px solid #64a3fa;
		border-radius: 5px;
	}
	.c-title{
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		background: #64a3fa;
		color: #fff;
	}#ruleTip ol{
		display: block;
		width: 90%;
		height: 70%;
		padding: 2% 5%;
		overflow-y: auto;
	}#ruleTip ol li{
		position: relative;
		list-style: circle;
		width: 100%;
		margin: 5px 0;
		line-height: 25px;
		border-bottom: 1.5px dotted #A1D1F9;
		color: #001F3F;
	}#ruleTip .btn,#regBoard .btn,#loginBoard .btn{
		display: inline-block;
		padding: 10px 20px;
		border-radius: 5px;
		background: #A1D1F9;
		color: #fff;
		margin: 0 10px;
		cursor: pointer;
	}
	#regBoard .btn,#loginBoard .btn{
		margin: 0 5px;
	}
	
	#ruleTip #c-agree,#regBoard #registNow,#loginBoard #loginNow{
		background: #64a3fa;
	}#ruleTip p{
		text-align: center;
	}
	#log_reg{
		position: relative;
		padding: 0 10px;
		float: right;
	}#log_reg a,#log_reg span{
		font-size: 16px;
		height: 26px;
		line-height: 26px;
		position: relative;
		padding: 0 5px;
		display: inline-block;
		cursor: pointer;
	}.keyBoard{
		width: 94%;
		padding: 0 3%;
		margin: 20px 0;
		text-align: center;
	}.keyBoard a{
		display: inline-block;
		width: 45px;
		height: 45px;
		border: 1px solid #64a3fa;
		margin: 3px 0px;
		border-radius: 5px;
		text-align: center;
		line-height: 45px;
		font-size: 18px;
		color: #64a3fa;
		font-weight: bold;
		cursor: pointer;
	}.keyBoard a:active{
		box-shadow: inset 0 0 10px #64a3fa;
	}
</style>
</head>
<body class="bg1">
<div class="header">
    <div class="logo"><a href="javascript:void(0);"><img src="img/n_logo.png" alt=""></a></div>
    <%--<div class="user">
        <img src="img/man.png" alt="">
        <div class="admin">
            <span class="name">${user.name }</span><br>
            <span class="number">${user.cardno }</span>
        </div>
    </div>
--%>
	<c:if test="${isLogin!='0' }">
		<div id="log_reg">
	    	<a id="logBtn">登录</a>
	    	<span>|</span>
	    	<a id="regBtn">注册</a>
	    </div>
    </c:if>
</div>
<div class="main">
    <ul class="list clear">
        <li>
            <a href="javascript:void(0);" onclick="gotoChoose();" class="reader">
                <img src="img/200-1.png" alt=""><br>
                <span style="color:#000;">开始朗读</span>
            </a>
        </li>
       <%-- <li>
            <a href="javascript:;" class="rank">
                <img src="img/200-2.png" alt=""><br>
                <span style="color:#000;">查看排名</span>
            </a>
        </li>
        <li>
            <a href="javascript:;" class="activity">
                <img src="img/200-3.png" alt=""><br>
                <span style="color:#000;">参加活动</span>
            </a>
        </li>
        <li style="margin-right: 0;">
            <a href="javascript:;"class="expect">
                <img src="img/200-4.png" alt=""><br>
                <span style="color:#000;">更多...</span>
            </a>
        </li>
    --%></ul>
</div>

<div class="footer">
	<div style="height:225px;">
    <ul>
        <li><span></span>欢迎使用莱柏锐朗读亭</li>
        <li><span></span>朗读亭提供朗读录制服务</li>
    </ul>
    <c:if test="${isLogin!='1' }"><img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${ticket }" alt="" class="footerimg1"></c:if>
    <c:if test="${isLogin=='1' }"><img src="img/wx.png" alt="" class="footerimg1"></c:if>
    </div>
    <div style="text-align: center;line-height: 60px;">
	      ${c.footer }
	  </div>
</div>

<div class="mengban"></div>
	<div id="ruleTip">
		<p class="c-title">朗读声明</p>
		<ol>
			<li>用户在使用莱柏锐朗读亭之前，均应仔细阅读本声明，一旦使用，即视为接受本声明的全部内容。声明如下：</li>
			<li>1、任何个人或机构都不得朗读或录制色情、暴力或政治敏感素材；</li>
			<li>2、任何个人或机构通过朗读亭朗读的个人或机构素材，莱柏锐不对该素材内容之合法性、准确性、真实性、适用性、安全性负责；莱柏锐不代表该素材内容的任何主张或立场；</li>
			<li>3、朗读亭配有全程监控录像，使用过程中，不得蓄意破坏或损坏朗读亭设备，否则将追究其法律责任；</li>
			<li>同意以上声明可进入朗读，取消退出。</li>
		</ol>
		<p><a class="btn" id="c-agree">同意</a><a class="btn" id="c-cancel">取消</a></p>
	</div>
<!--点击登录按钮的弹出面板-->
<div id="loginBoard">
<p class="c-title">朗读亭用户登录</p>
	<form>
		<ul id="login-namePwd">
			<li><span>输入帐号：</span><input type="text" id="l-username"></li>
			<li><span>输入密码：</span><input type="password" id="l-userpwd"></li>
			<li><span style=" display:inline-block;width: 80px;"></span><a class="btn" id="loginNow">立即登录</a>
				<a class="btn" id="l-cancel">取消</a></li>
		</ul>
	</form>
	<!--数字字母键盘-->
	<div class="keyBoard" id="keyBoard2">
		<p><a>1</a>
		<a>2</a>
		<a>3</a>
		<a>4</a>
		<a>5</a>
		<a>6</a>
		<a>7</a>
		<a>8</a>
		<a>9</a>
		<a>0</a>
		</p>
		<p><a>q</a>
		<a>w</a>
		<a>e</a>
		<a>r</a>
		<a>t</a>
		<a>y</a>
		<a>u</a>
		<a>i</a>
		<a>o</a>
		<a>p</a>
		</p>
		<p>
		<a>a</a>
		<a>s</a>
		<a>d</a>
		<a>f</a>
		<a>g</a>
		<a>h</a>
		<a>j</a>
		<a>k</a>
		<a>l</a>
		</p>
		<p>
		<a>z</a>
		<a>x</a>
		<a>c</a>
		<a>v</a>
		<a>b</a>
		<a>n</a>
		<a>m</a>
		<a>D</a>
		<a>←</a>
		</p>
	</div>
</div>



<!--点击注册按钮的弹出面板-->
<div id="regBoard">
	<p class="c-title">朗读亭用户注册</p>
	<form>
	<ul id="login-namePwd">
		<li><span>输入帐号：</span><input type="text" id="username"></li>
		<li><span>输入密码：</span><input type="password" id="userpwd"></li>
		<li><span>确认密码：</span><input type="password" id="copypwd"></li>
		<li><span style=" display:inline-block;width: 80px;"></span><a class="btn" id="registNow">立即注册</a>
			<a class="btn" id="cancel">取消</a></li>
	</ul>
	</form>
	<!--数字字母键盘-->
	<div class="keyBoard" id="keyBoard1">
		<p><a>1</a>
		<a>2</a>
		<a>3</a>
		<a>4</a>
		<a>5</a>
		<a>6</a>
		<a>7</a>
		<a>8</a>
		<a>9</a>
		<a>0</a>
		</p>
		<p><a>q</a>
		<a>w</a>
		<a>e</a>
		<a>r</a>
		<a>t</a>
		<a>y</a>
		<a>u</a>
		<a>i</a>
		<a>o</a>
		<a>p</a>
		</p>
		<p>
		<a>a</a>
		<a>s</a>
		<a>d</a>
		<a>f</a>
		<a>g</a>
		<a>h</a>
		<a>j</a>
		<a>k</a>
		<a>l</a>
		</p>
		<p>
		<a>z</a>
		<a>x</a>
		<a>c</a>
		<a>v</a>
		<a>b</a>
		<a>n</a>
		<a>m</a>
		<a>D</a>
		<a>←</a>
		</p>
	</div>
</div>

<script>
var i = 120;
Timeout();
function Timeout(){
	if(i>0){
		i--;
		setTimeout(function(){Timeout();},1000);
	}else{
		$.ajax({
			async : false,
			cache : false,
			type : 'post',
			dataType : "json",
			url :  'declaimer/removeDeviceUse?devicecode=${devicecode }',// 请求的action路径
			success : function(data) {
				//window.location.reload();
			}
		});	
	}
}
function gotoChoose(){
	
	$.ajax({
		async : false,
		cache : false,
		type : 'post',
		dataType : "json",
		url :  'declaimer/findUser?devicecode=${devicecode }',// 请求的action路径
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			//layer.msg("请求失败！");
		},
		success : function(data) {
			//cll：判断是否登录
			if(data.state=="1"){
				
				//询问框,朗读规则内容，可以是文字，也可写html
				var ruleTip=$("#ruleTip");
				var mengban=$(".mengban");
				ruleTip.fadeIn();
				mengban.fadeIn();
				var agree=$("#c-agree");
				agree.unbind('click');
				agree.click(function(){
					setTimeout("gotoPage('"+data.message+"')",100);
					ruleTip.fadeOut();
					mengban.fadeOut();
				});
				var cancel=$("#c-cancel")
				cancel.unbind('click');
					cancel.click(function(){
						ruleTip.fadeOut();
						mengban.fadeOut();
						//询问框
						layer.confirm('是否退出此次登录？', {
						  btn: ['是','否'] //按钮
						}, function(){
							$.ajax({
								async : false,
								cache : false,
								type : 'post',
								dataType : "json",
								url :  'declaimer/removeDeviceUse?devicecode=${devicecode }',// 请求的action路径
								success : function(data) {
									layer.msg('已退出', {icon: 1});
								}
							});	
						  
						}, function(){
						  
						});
					});
				 // setTimeout("gotoPage('"+data.message+"')",100);
			}else{
				layer.msg(data.message,{icon:0});
			}
		}
	});	
}
function gotoPage(cardno){
	window.location.href="<%=basePath%>declaimer/mtype?guid=${guid }&devicecode=${devicecode}&cardno="+cardno;
}

function register(){
	var regBtn=$("#regBtn");
	var mengban=$(".mengban");
	var regBoard=$("#regBoard");
	var cancel=$("#cancel");
	
	regBtn.click(function(){
		regBoard.fadeIn();
		mengban.fadeIn();
		$("#username").focus();
	});
	cancel.click(function(){
		regBoard.fadeOut();
		mengban.fadeOut();
	});
}
function login(){
	var logBtn=$("#logBtn");
	var mengban=$(".mengban");
	var regBoard=$("#loginBoard");
	var cancel=$("#l-cancel");
	
	logBtn.click(function(){
		$.ajax({
			async : false,
			cache : false,
			type : 'post',
			dataType : "json",
			url :  'declaimer/findUser?devicecode=${devicecode }',// 请求的action路径
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				//layer.msg("请求失败！");
			},
			success : function(data) {
				//cll：判断是否登录
				if(data.state=="1"){
					layer.confirm('是否退出此次登录？', {
						  btn: ['是','否'] //按钮
						}, function(){
							$.ajax({
								async : false,
								cache : false,
								type : 'post',
								dataType : "json",
								url :  'declaimer/removeDeviceUse?devicecode=${devicecode }',// 请求的action路径
								success : function(data) {
									layer.msg('已退出', {icon: 1});
									regBoard.fadeIn();
									mengban.fadeIn();
									$("#l-username").focus();
								}
							});	
						  
						}, function(){
							gotoPage(data.message);
						});
				}else{
					regBoard.fadeIn();
					mengban.fadeIn();
					$("#l-username").focus();
				}
			}
		});
		
	});
	cancel.click(function(){
		regBoard.fadeOut();
		mengban.fadeOut();
	});
}
$(function(){
	register();
	login();
	var reginput=$("#regBoard input");
	var loginput=$("#loginBoard input");
	reginput.focus(function(){
		var inputId=$(this).attr("id");
		keyBoard(inputId);
	});
    loginput.focus(function(){
		var inputId=$(this).attr("id");
		keyBoard(inputId);
	});
	var keybtn=$(".keyBoard a");
	
	/*禁止文字被选中*/
	keybtn.each(function(){
		$(this).attr("onselectstart","return false");
	});
	//用户注册
	$("#registNow").click(function(){
		if($("#username").val()==''){
			layer.msg("用户名不能为空！");
			return;
		}
		if($("#copypwd").val()==''){
			layer.msg("用户密码不能为空！");
			return;
		}
		if($("#copypwd").val()!=$("#userpwd").val()){
			layer.msg("两次密码不一致！");
			return;
		}
		$.ajax({
			async : false,
			cache : false,
			type : 'post',
			dataType : "json",
			url :  'declaimer/save_user?cardno='+$("#username").val()+'&guid=${guid}&password='+$("#copypwd").val(),// 请求的action路径
			success : function(data) {
				if(data.state=='1'){
					layer.msg(data.message);
					$("#loginBoard").fadeOut();
					$(".mengban").fadeOut();
				}else{
					layer.msg(data.message);
				}
			}
		});	
	});
	//用户登录
	$("#loginNow").click(function(){
		if($("#l-username").val()==''){
			layer.msg("用户名不能为空！");
			return;
		}
		if($("#l-userpwd").val()==''){
			layer.msg("用户密码不能为空！");
			return;
		}
		$.ajax({
			async : false,
			cache : false,
			type : 'post',
			dataType : "json",
			url :  'declaimer/login?cardno='+$("#l-username").val()+'&guid=${guid}&devicecode=${devicecode }&password='+$("#l-userpwd").val(),// 请求的action路径
			success : function(data) {
				if(data.state=='1'){
					gotoPage($("#l-username").val());
				}else{
					layer.msg(data.message);
				}
			}
		});	
	});
});

function keyBoard(inputId){
	var inputNow=$("#"+inputId);
	var keybtn=$(".keyBoard a");
	
	 keybtn.unbind("click");
	 keybtn.click(function(){
	 	var val='';
	 	if($(this).text()=="D"){
	 		inputNow.val('');
	 	}else if($(this).text()=="←"){
	 		var ival=inputNow.val();
	 		var val=ival.substring(0,ival.length-1);
	 		inputNow.val(val);
	 	}else{
	 		var val=$(this).text();
	 		var ival=inputNow.val();
	 		inputNow.val(ival+val);
	 	}
	 });
}

</script>
</body>
</html>